<template>
    <div class="details-page">
        <div class="card">
            <div class="card-title">患者信息</div>
            <div class="grid">
                <div class="row">
                    <div class="col"><span class="label">患者姓名</span><span class="value">{{ data.name }}</span></div>
                    <div class="col"><span class="label">就诊卡号</span><span class="value">{{ data.medicalCard }}</span></div>
                    <div class="col avatar-wrap">
                        <span class="label">患者头像</span>
                        <div class="avatar" :style="avatarStyleObj"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col"><span class="label">证件类型</span><span class="value">{{ data.idCardType }}</span></div>
                    <div class="col"><span class="label">证件号码</span><span class="value">{{ data.idCardNum }}</span></div>
                    <div class="col"><span class="label">手机号</span><span class="value">{{ data.phone }}</span></div>
                </div>
                <div class="row">
                    <div class="col"><span class="label">关系</span><span class="value">{{ data.relationship }}</span></div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-title">预约信息</div>
            <div class="grid">
                <div class="row">
                    <div class="col"><span class="label">就诊医院</span><span class="value">{{ data.attending }}</span></div>
                    <div class="col"><span class="label">医院地址</span><span class="value">{{ data.doctorAddress }}</span></div>
                    <div class="col"><span class="label">就诊科室</span><span class="value">{{ data.department }}</span></div>
                </div>
                <div class="row">
                    <div class="col"><span class="label">就诊医生</span><span class="value">{{ data.attendingName }}</span></div>
                    <div class="col"><span class="label">医生职称</span><span class="value">{{ data.doctorName }}</span></div>
                    <div class="col"><span class="label">挂号类型</span><span class="value">{{ data.registerName || data.registTypeId }}</span></div>
                </div>
                <div class="row">
                    <div class="col"><span class="label">门诊时间</span><span class="value">{{ fmtOutpatient }}</span></div>
                    <div class="col"><span class="label">候诊时间</span><span class="value">{{ fmtWaiting }}</span></div>
                    <div class="col"><span class="label">预约时间</span><span class="value">{{ fmtAppointment }}</span></div>
                </div>
                <div class="row">
                    <div class="col"><span class="label">挂号费</span><span class="value">￥{{ Number(data.cost || 0).toFixed(2) }}</span></div>
                    <div class="col"><span class="label">就诊状态</span><span class="value">{{ data.medicalState ? '已就诊' : '待就诊' }}</span></div>
                    <div class="col"><span class="label">取消原因</span><span class="value">{{ data.reason || '—' }}</span></div>
                </div>
                <div class="row">
                    <div class="col"><span class="label">取消时间</span><span class="value">{{ data.cancelTime ? moment(data.cancelTime).format('YYYY-MM-DD HH:mm:ss') : '—' }}</span></div>
                    <div class="col"><span class="label">挂号备注</span><span class="value">{{ data.desc || '—' }}</span></div>
                </div>
            </div>
            <div class="actions">
                <button class="btn" @click="goBack">返回</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import moment from 'moment'

const route = useRoute()
const router = useRouter()

const payload = route.query?.payload ? JSON.parse(decodeURIComponent(route.query.payload as string)) : {}
const avatarStyleObj = route.query?.avatarStyle ? JSON.parse(decodeURIComponent(route.query.avatarStyle as string)) : { width: '64px', height: '64px', borderRadius: '50%' }

const data = payload as Record<string, any>

const fmtOutpatient = computed(() => data.outpatientTime ? moment(data.outpatientTime).format('YYYY-MM-DD') : '—')
const fmtWaiting = computed(() => data.waitingTime ? moment(data.waitingTime).format('HH:mm YYYY-MM-DD') : '—')
const fmtAppointment = computed(() => data.appointmentTime ? moment(data.appointmentTime).format('YYYY-MM-DD HH:mm:ss') : '—')

const goBack = () => router.back()
</script>

<style scoped>
.details-page {
    padding: 16px 20px 28px;
}
.card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2d3d;
    margin-bottom: 12px;
}
.grid .row {
    display: flex;
    gap: 24px;
    margin-bottom: 10px;
}
.grid .col {
    flex: 1;
    min-width: 180px;
}
.label {
    color: #909399;
    margin-right: 8px;
}
.value {
    color: #303133;
}
.avatar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.avatar {
    background: #e8f0ff;
}
.actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}
.btn {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    background: #fff;
    cursor: pointer;
}
</style>

